<template>
    <view class="one" >
        <form action=""   method="POST" name="zhuce" >
			<view class="c">
			 <span class="b">账号:</span>
			<input type="text" name="name" class="t" placeholder="注册用户名" autofocus required maxlength="6">
			</view>
			<view class="c">
				<span class="b">密码:</span>
				<input v-model="pass"  type="password" name="password" class="t"  placeholder="注册密码" required maxlength="12">
			</view>
			<span class="tsz " v-show="ts"> 亲，密码不一致哦</span>
			<view class="c">
				<span class="b">确认密码:</span>
				
				<input v-model="pass1" type="password" name="password1" class="t"  placeholder="确认密码" required   >
				
			</view>
			<view class="c">
				<span class="b" >邮箱</span>
				<input type="email" name="email" class="t"  placeholder="邮箱" required @focus="yanzheng" >
				
			</view>
			<view class="">
				 <span class="b">性别:</span>&nbsp;&nbsp;
				<radio-group>
                <label class="radio"><radio  name="xing" value="男" />男</label>
                <label class="radio"><radio  name="xing" value="女" />女</label>
                </radio-group>
			</view>
			<view class="" >
				 <span class="b" >学历:</span>
				 <radio-group >
					<label class="radio"><radio  name="li" value="初中" />初中</label>
					<label class="radio"><radio  name="li" value="高中" />高中</label>
					<label class="radio"><radio  name="li" value="大专" />大专</label>
					<label class="radio"><radio  name="li" value="大学" />大学</label>
					 
				 </radio-group>
			</view>
			<view class="but" style="width: 100%;" >
				<button   type="submit" size="mini"  class="" >提交</button>
				<button   type="reset" size="mini" class="">取消</button>
				
			</view>
		</form>
       
    </view>
</template>


<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	page{
		background-color: #895b8a;
	}
	button{
		display: inline-block;
		margin: 0 auto;
	}
	.but{
		
		text-align: center;
		
		position: absolute;
		bottom: 0px;
		 
		 
		
		
		
	}
	
	
	
	
.b{
		width: 30%;
		height: 60px;
		flex-shrink: 0;
		margin-right: 30px;
		background-color: #895b8a;
		color: #FFFFFF;
	}
	.c{
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 5px;
		font-size: 16px;
		border-bottom: 1px solid #000000;
		height: 30px;
		width: 100%;
		 background-color: #895B8A;
	}
	.t{
		line-height: 60px;
		text-align: center;
		background-color: #895B8A;

	}
	.box{
		background-color: #007AFF;
	}
	.one{
		margin-top: 20px;
	}
</style>
